<template>
  <div>
    <DetailBook :book="book"/>
    <DetailStats
      :readers="book.readers"
      :readerNum="book.readerNum"
      :rankNum="book.rankNum"
      :rankAvg="book.rankAvg"
    />
    <DetailRate
      :rate-value="book.ratevalue"
      @onRateChange="onRateChange"
    />
    <!-- 目录 -->
    <!-- <DetailContents
      :contents="contents"
      @readBook="readBook"
    /> -->
  <div class="detail-contents-wrapper">
    <div class="detail-contents-title">目录</div>
    <div
      class="detail-contents"
      v-for="(item, index) in contents"
      :key="index"
      @click="() => readBook(item.href)"
    >
      <div
        class="detail-contents-label"
        :style="{marginLeft: (15 * item.level) + 'px'}"
      >
        {{item.label}}
      </div>
    </div>
  </div>
    <!-- 加入书架 -->
    <div class="detail-bottom">
    <div class="detail-btn-wrapper">
      <van-button
        :custom-class="isInShelf ? 'detail-btn-remove' : 'detail-btn-shelf'"
        @click="handleShelf"
        round
      >
        {{isInShelf ? '移出书架' : '加入书架'}}
      </van-button>
    </div>
    <div class="detail-btn-wrapper">
      <van-button
        custom-class="detail-btn-read"
        round
        @click="readBook()"
      >
        阅读
      </van-button>
    </div>
   </div>
  </div>
</template>

<script>
  import DetailRate from '../../components/detail/DetailRate'
  import DetailStats from '../../components/detail/DetailStats'
  import DetailBook from '../../components/detail/DetailBook'
  import { bookDetail, bookRankSave, bookContents, bookIsInShelf, bookShelfSave, bookShelfRemove } from '../../api'
  import { getStorageSync } from '../../api/wechat'
  export default {
    components: {
      DetailRate,
      DetailStats,
      DetailBook
    },
    data () {
      return {
        book: {},
        contents: [],
        isInShelf: false
      }
    },
    methods: {
      handleShelf () {
        const openId = getStorageSync('openId')
        const { fileName } = this.$route.query
        if (!this.isInShelf) {
          bookShelfSave({ openId, fileName }).then(this.getBookIsInShelf)
        } else {
          const vue = this
          mpvue.showModal({
            title: '提示',
            content: `是否确认将《${this.book.title}》移出书架？`,
            success (res) {
              if (res.confirm) {
                bookShelfRemove({ openId, fileName }).then(vue.getBookIsInShelf)
              }
            }
          })
        }
      },
      onRateChange (value) {
        const openId = getStorageSync('openId')
        const { fileName } = this.$route.query
        bookRankSave({openId, fileName, rank: value}).then(() => {
          this.getBookDetail()
        })
      },
      getBookDetail () {
        const openId = getStorageSync('openId')
        const { fileName } = this.$route.query
        if (openId && fileName) {
          bookDetail({ openId, fileName }).then(response => {
            this.book = response.data.data
          })
        }
      },
      getBookContents () {
        const { fileName } = this.$route.query
        if (fileName) {
          this.contents = [] // 在请求前重置 this.contents 值
          bookContents({ fileName }).then(res => {
            this.contents = res.data.data
          })
        }
      },
      getBookIsInShelf () {
        const openId = getStorageSync('openId')
        const { fileName } = this.$route.query
        if (openId && fileName) {
          bookIsInShelf({ openId, fileName }).then(response => {
            const { data } = response.data
            data.length === 0 ? this.isInShelf = false : this.isInShelf = true
          })
        }
      },
      readBook (href) {
        const query = {
          fileName: this.book.fileName,
          opf: this.book.opf
        }
        if (href) {
          const index = href.indexOf('/')
          if (index >= 0) {
            query.navigation = href.slice(index + 1)
          } else {
            query.navigation = href
          }
        }
        if (this.book && this.book.fileName) {
          this.$router.push({
            path: '/pages/read/main',
            query
          })
        }
      }
    },
    mounted () {
      this.getBookDetail()
      this.getBookContents()
      this.getBookIsInShelf()
    }
  }
</script>

<style lang="scss" scoped>
  .detail-contents-wrapper {
    padding: 0 0 60px 15px;
    margin-top: 15px;

    .detail-contents-title {
      font-size: 22px;
      color: #333333;
    }

    .detail-contents {
      padding: 20px 15px 20px 0;
      border-bottom: 1px solid #EBEBEB;

      &:last-child {
        border-bottom: none;
      }

      .detail-contents-label {
        font-size: 15px;
        color: #868686;
        line-height: 18px;
        max-height: 18px;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
  .detail-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 15px;
    border-top: 1px solid #eee;
    box-shadow: 0 -2px 4px 0 rgba(0,0,0,.1);

    .detail-btn-wrapper {
      flex: 1;
    }
  }
</style>

<style lang="scss">
  .detail-bottom {
    .detail-btn-read {
      width: 100%;
      border: none;
      color: #fff;
      background: #1EA3F5;
      margin-left: 7.5px;
    }

    .detail-btn-shelf {
      width: 100%;
      color: #1EA3F5;
      background: #fff;
      border: 1px solid #1EA3F5;
      margin-right: 7.5px;
    }

    .detail-btn-remove {
      width: 100%;
      color: #F96128;
      background: rgba(255, 175, 155, .3);
      border: 1px solid #FFAF9B;
      margin-right: 7.5px;
    }
  }
</style>
